<template>
    <div class="header">
        <div class="title">
            <div class="title-img"><img src="//www.cardbaobao.com/images/cbblogos.png" alt=""></div>
            <div class="title-contain">
                <ul>
                    <li><a @mouseenter="mouseenterFn()" @click="faGoTo('/index', 0)">首页</a></li>
                    <li><a @mouseenter="mouseenterFn(menu.creditInfoData)" @click="faGoTo(menu.creditInfoData[0].router, 0)">信用卡资讯</a></li>
                    <li><a @mouseenter="mouseenterFn(menu.creditApplyData)" @click="faGoTo(menu.creditApplyData[0].router, 0)">信用卡申请</a></li>
                    <li><a @mouseenter="mouseenterFn(menu.creditCenterData)" @click="faGoTo(menu.creditCenterData[0].router, 0)">贷款中心</a></a>
                    </li>
                    <li><a @mouseenter="mouseenterFn(menu.commonToolsData)" @click="faGoTo(menu.commonToolsData[0].router, 0)">常用工具</a></li>
                    <li><a @mouseenter="mouseenterFn(menu.releatUsData)" @click="faGoTo(menu.releatUsData[0].router, 0)">联系我们</a></li>
                </ul>
            </div>
        </div>
        <div v-if="show" class="hover-contain">
            <ul>
                <li v-for="i in list"><a @click="faGoTo(i.router, i.type)">{{i.tip}}</a></li>
            </ul>
        </div>
        <div class="banner"><img :src=src alt=""></div>
    </div>
</template>
<script>
import { menuList } from '@/common/js/menu/getMenuList'
export default {
    data() {
        return {
            username: '',
            list: [],
            show: false,
            menu: {}
        }
    },
    props: {
        src: {
            type: String,
            default: '//www.cardbaobao.com/images/cbblogos.png'
        }
    },
    mounted() {
        this.menu = menuList
    },
    methods: {
        mouseenterFn(v) {
            if (v === undefined) {
                this.show = false
                return false
            }
            this.list = v
            this.show = true
        },
        faGoTo(v, t) {
            this.$router.push({ path: v, query: { type: t } })
        }
    }

}

</script>
<style scoped lang="less">
@import "../../common/less/variable.less";

.header {
    width: @maxwidth;
    margin: 0 auto;
    background-color: #ffffff;
    .title {
        overflow: hidden;
    }
    .title-img {
        width: 20%;
        height: 1rem;
        img {
            width: 100%;
            height: 100%;
        }
        float: left;
    }
    .title-contain {
        width: 65%;
        float: left;
        font-size: .14rem;
        height: .3rem;
        line-height: .3rem;
        padding-top: .7rem;
        ul {
            width: 100%;
            li {
                a {
                    display: block;
                    padding: 0 .15rem;
                    background-color: #1ca3e5;
                    text-decoration: none;
                }
                a:hover {
                    color: #1ca3e5;
                    background-color: #ffffff;
                    cursor: pointer;
                }
            }
        }
        ul,
        li {
            list-style: none;
            float: left;
            color: #ffffff;
        }
    }
    .hover-contain {
        height: .3rem;
        width: 100%;
        background-color: #DCDCDC;
        font-size: .16rem;
        ul {
            width: 100%;
            li {
                a {
                    display: block;
                    padding: 0 .15rem;
                    background-color: #DCDCDC;
                    text-decoration: none;
                }
                a:hover {
                    cursor: pointer;
                }
            }
        }
        ul,
        li {
            list-style: none;
            float: left;
            color: #ffffff;
        }
    }
    .banner {
        width: 100%;
        height: 2rem;
        img {
            width: 100%;
            height: 100%;
        }
    }
}

</style>
